<template>
  <div>
    <button @click="reduce" ref="reduce">-</button>
    <span>{{num}}</span>
    <button @click="add">+</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 1
    };
  },
  methods: {
      reduce: function(){
          this.num--;
          console.log(this.$refs.reduce);
          if(this.num == 0){
              this.$refs.reduce.disabled = true;
          }
      },
      add: function(){
          this.num++;
          this.$refs.reduce.disabled = false;
      }
  }
  
};
</script>
<style scoped>
span {
  display: inline-block;
  border-bottom: 1px solid #ccc;
  width: 40px;
  text-align: center;
}
</style>